import React, { useState, ChangeEvent } from 'react';
import './InputComponent.scss';

interface InputProps {
    value?: string | number;
    onChange: (value: string) => void;
    className?: string;
    placeholder?: string;
    width?: any
}

const InputComponent: React.FC<InputProps> = (
    {
        value, //绑定的值
        onChange, //改变值的方法
        className, //类名
        placeholder, //占位符
        width,// 宽度
    }
) => {
    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        onChange(event.target.value);
    };

    return (
        <input
            type="text"
            value={value}
            onChange={handleChange}
            className={`input-component ${className}`}
            placeholder={placeholder}
            style={{ minWidth: width }}
        />
    );
};

export default InputComponent;
